/* ======================================================
   <!-- Table Grid -->
/* ====================================================== */
@import '@poemkit/components/_utils/styles/_variable-and-mixin.scss';

/*
 * 1. Row Dropzone
*/

$table-border-color: #EEEEEE;
$table-border-headerbg: #FAFAFA;
$table-alternant-bg: #FAFAFA;


/*
 ---------------------------
 1. Row Dropzone
 ---------------------------
 */


.poemkit-table-grid {
    border-collapse: separate;
    border-spacing: 0;
    
    .poemkit-table-grid__head {
        display: flex;

        .poemkit-table-grid__head-cell {
            flex: 1; /* default value, this attribute can be specified in HTML */
            box-sizing: border-box;
            text-align: start;
            font-size: 0.875rem;
            font-weight: bold;
            line-height: 1.71428571429;
            text-transform: uppercase;
            outline: 0;
            padding: .5rem 1rem;
            color: $sub-text-color;

        }
 
    }
    
    
    .poemkit-table-grid__body {
        position: relative;
        border: 1px $table-border-color solid;
        border-radius: 3px;
        overflow: auto;
        vertical-align: middle;
        background-color: $table-alternant-bg;
        margin-top: 1rem;
    }
    

    .poemkit-table-grid__row {
        display: flex;
        position: relative;
        cursor: pointer;
        border-bottom: 1px solid $table-border-color;
        @include transition-default(); 

        
        
        &:focus {
            outline: 0;
        }
        
        /* Helper for shared drop target overlay */
        &.is-drop-target {
            border-radius: 3px;
            
            &::before {
                content: '';
                position: absolute;
                height: 100%;
                width: 100%;
                z-index: 1;
                box-shadow: inset 0 0 0 2px rgb(55, 142, 240);
            }
        }
        
        
        .poemkit-table-grid__row-cell {
            flex: 1; /* default value, this attribute can be specified in HTML */
            font-size: 1rem;
            padding: .5rem 1rem;
        }
    }
    
    
}



